<template>
	<view class="home" :style="{height:height+'px'}">
		<view class="header">
			<view class="header-left">工作台</view>
			<view class="header-right">
				<image src="../../static/inform/Union.png" mode=""></image>
			</view>
		</view>
		<view class="tabs">
			<view class="tab" v-for="item in headerCard" :key="item.id" @tap="btntop(item.page)">
				<view class="tabn">
					<view class="img">
						<image :src="item.url" mode=""></image>
					</view>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="content"  :style="{height:screenHeight+'px'}" >
			<div class="content-left">
				<view class="list" :class="{ bgc: isShow == item.id }" @click="navcut(item.id)" v-for="item in meun"
					:key="item.id">
					<text :class="{ black: isShow == item.id }">{{ item.name }}</text>
				</view>
			</div>
			<!-- 实时通知 -->
			<div class="content-right">
				<view class="realtime" v-show="isShow == 1">
					<view class="list" v-for="item in tzlist" :key="item.id" @touchstart.prevent="touchstart(item)">
						<view class="list-left">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="list-right">
							<view class="title">
								<text>{{ item.name }}</text>
							</view>
							<text>{{ item.ms }}</text>
						</view>
					</view>
				</view>
				<view class="operation box" v-show="isShow == 2">
					<view class="box-list" v-for="item in operationList" :key="item.id" @click="btn(item.id)">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{ item.name }}</text>
					</view>
				</view>
				<view class="polling box" v-show="isShow == 3">
					<view class="box-list" v-for="item in pollingList" :key="item.id" @click="goinspection(item.id)">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{ item.name }}</text>
					</view>
				</view>
				<view class="examination box" v-show="isShow == 4">
					<view class="box-list" @click="examination(item.id)" v-for="item in examinationList" :key="item.id">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{ item.name }}</text>
					</view>
				</view>
				<view class="cultivate box" v-show="isShow == 5">
					<view class="box-list" @click="cultivate(item.id)" v-for="item in cultivateList" :key="item.id">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{ item.name }}</text>
					</view>
				</view>
				<view class="risk box" v-show="isShow == 6">
					<view class="box-list" @click="risk(item.id)" v-for="item in riskList" :key="item.id">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{ item.name }}</text>
					</view>
				</view>
				<view class="equipment box" v-show="isShow == 7">
					<view class="box-list" v-for="item in equipmentList" :key="item.id" @tap="goequipment(item.id)">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{ item.name }}</text>
					</view>
				</view>
				<view class="hiddendanger box" v-show="isShow == 8">
					<view class="box-list" v-for="item in hiddendangerList" :key="item.id" @tap="gorectified(item.id)">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</div>
		</view>
		<u-modal v-if="showTitle" :content="tokenContent" width="300" @confirm="toLogin"></u-modal>
	</view>
</template>

<script>
	import {
		home,
		del
	} from "@/api/home.js";
	import {
		GETUSERINFO
	} from '@/api/public.js'
	import {
		list,
		menuList,
		realtimeList,
		operationList,
		pollingList,
		examinationList,
		cultivateList,
		riskList,
		equipmentList,
		hiddendangerList
	} from '@/utils/address.js'
	export default {
		data() {
			return {
				height: null,
				tokenContent: "请登录之后再进行操作，3s后自动跳转到登录页面",
				showTitle: false,
				headerCard: list,
				meun: menuList,
				isShow: 1,
				realtimeList: realtimeList,
				operationList: operationList,
				pollingList: pollingList,
				examinationList: examinationList,
				cultivateList: cultivateList,
				riskList: riskList,
				equipmentList: equipmentList,
				hiddendangerList: hiddendangerList,
				tzlist: [],
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.height = res.windowHeight
					this.screenHeight = parseInt(res.windowHeight  - 148)
				}
			});
		},
		onReady() {
			let tokens = uni.getStorageSync("token");
			if (!tokens) {
				this.showTitle = true;
				setTimeout((e) => {
					uni.navigateTo({
						url: "/pages/login/login",
					});
				}, 1300);
			} else {
				GETUSERINFO(uni.getStorageSync("userId")).then((r) => {
					uni.setStorageSync('userINFO',r.data)
				})
			}
		},
		onShow() {
			this.gettzlist();
		},
		methods: {
			btntop(item) {
				uni.navigateTo({
					url: item,
				});
			},
			toLogin() {
				uni.redirectTo({
					url: "/pages/login/login",
				});
			},
			click(item) {
				console.log("item", item);
			},
			navcut(val) {
				this.isShow = val;
      if (val === 1){
        this.gettzlist();
      }
			},
			gettzlist() {
				let userid = uni.getStorageSync("userId");
				home({userid:userid}).then((res) => {
					this.tzlist = res.data;
					this.tzlist.forEach((i) => {
						this.realtimeList.forEach((item) => {
							if (i.type == item.id) {
								i.icon = item.url;
							}
						});
					});
				});
			},
			// 实时通知
			touchstart(val) {
				let that = this;
				uni.showModal({
					title: "删除",
					content: "请问要删除本条消息吗？",
					success: function(res) {
						if (res.confirm) {
							del({
								ids: [val.id],
							}).then((res) => {
								uni.showToast({
									icon: "success",
									title: "删除成功",
								});
								that.gettzlist();
							});
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			// 在线考试页面跳转
			examination(val) {
				if (val == 1) {
					uni.navigateTo({
						url: "/pages/totakenexamination/totakenexamination",
					});
				} else if (val == 2) {
					uni.navigateTo({
						url: "/pages/mygrade/mygrade",
					});
				}
			},
			// 教育培训
			cultivate(val) {
				if (val == 1) {
					uni.navigateTo({
						url: "/pages/pdfcourse/pdfcourse",
					});
				} else if (val == 2) {
					uni.navigateTo({
						url: "/pages/videocourse/videocourse",
					});
				} else if (val == 3) {
					uni.navigateTo({
						url: "/pages/trainactivity/trainactivity",
					});
				}
			},
			// 风险研判页面跳转
			risk(val) {
				if (val == 1) {
					uni.navigateTo({
						url: "/pages/everyday/everyday",
					});
				} else if (val == 2) {
					uni.navigateTo({
						url: "/pages/studyandjudge/studyandjudge",
					});
				}
			},
			btn(id) {
				if (id == 1) {
					uni.navigateTo({
						url: "/pages/operationTicket/index/index",
					});
				} else if (id == 2) {
					uni.navigateTo({
						url: "/pages/approval/index/index",
					});
				} else if (id == 3) {
					uni.navigateTo({
						url: "/pages/operationTicket/maintenance/maintenance",
					});
				} else if (id == 4) {
					uni.navigateTo({
						url: "/pages/operationTicket/acceptance/acceptance",
					});
				}
			},
			goinspection(id) {
				if (id == 1) {
					uni.navigateTo({
						url: "/pages/inspection/index/index",
					});
				} else if (id == 2) {
					uni.navigateTo({
						url: "/pages/inspection/record/record",
					});
				}
			},
			// 设备设施
			goequipment(id) {
				console.log(id);
				uni.scanCode({
					success: function(res) {
						if (id == 1) {
							uni.navigateTo({
								url: `/pages/equipment/inspect/inspect?scssid=${res.result}`,
							});
						} else if (id == 2) {
							uni.navigateTo({
								url: `/pages/equipment/testing/testing?scssid=${res.result}`,
							});
						} else if (id == 3) {
							uni.navigateTo({
								url: `/pages/equipment/maintain/maintain?scssid=${res.result}`,
							});
						} else if (id == 4) {
							uni.navigateTo({
								url: `/pages/equipment/repair/repair?scssid=${res.result}`,
							});
						} else if (id == 5) {
							uni.navigateTo({
								url: `/pages/equipment/deactivate/deactivate?scssid=${res.result}`,
							});
						} else if (id == 6) {
							uni.navigateTo({
								url: `/pages/equipment/recovery/recovery?scssid=${res.result}`,
							});
						} else if (id == 7) {
							uni.navigateTo({
								url: `/pages/equipment/scrap/scrap?scssid=${res.result}`,
							});
						}
					},
				});
			},
			// 隐患治理
			gorectified(val) {
				console.log(val);
				if (val == 1) {
					uni.navigateTo({
						url: "/pages/rectified/rectified",
					});
				} else if (val == 2) {
					uni.navigateTo({
						url: "/pages/acceptancecheck/acceptancecheck",
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.home {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 100%;
		// height: calc(100vh - 175rpx);

		.header {
			width: 100vw;
			height: 88rpx;
			line-height: 88rpx;
			padding: 0 48rpx;
			box-sizing: border-box;
			background: #1989fa;
			display: flex;
			justify-content: space- between;

			.header-left {
				flex: 1;
				font-size: 40rpx;
				color: #fff;
				font-weight: bold;
			}

			.header-right {
				flex: 1;
				text-align: right;

				image {
					margin-top: 26rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.tabs {
			width: 100vw;
			height: 188rpx;
			padding: 0 0 0 20rpx;
			background: #1989fa;
			overflow-x: auto;
			display: flex;
			overflow-y: hidden;

			.tab {
				height: 188rpx;
				margin-top: 32rpx;
				margin-right: 20rpx;
				text-align: center;

				.tabn {
					width: 150rpx;

					.img {
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto;
						background-color: #fff;
						border-radius: 30%;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}

					text {
						font-size: 24rpx;
						color: #fff;
					}
				}
			}
		}

		.content {
			flex: 1;
			width: 750rpx;
			display: flex;


			.content-left {
				width: 208rpx;
				// height: 100%;
				overflow-y: auto;
				background: #f6f6f6;

				.list {
					width: 208rpx;
					height: 124rpx;
					line-height: 124rpx;
					text-align: center;

					text {
						font-size: 28rpx;
						color: #999;
					}

					.black {
						color: #333333;
						font-weight: bold;
					}
				}

				.bgc {
					background: #fff;
				}
			}

			.content-right {
				// height: 100%;

				overflow-y: auto;
				width: 542rpx;

				padding: 24rpx 22rpx 24rpx 24rpx;
				box-sizing: border-box;

				.realtime {
					.list {
						width: 496rpx;
						height: 144rpx;
						background-color: #f6f6f6;
						padding: 22rpx 0 22rpx 24rpx;
						box-sizing: border-box;
						margin-bottom: 16rpx;
						display: flex;

						.list-left {
							width: 100rpx;
							height: 100rpx;
							border-radius: 36rpx;
							background-color: #fff;

							image {
								width: 100rpx;
								height: 100%;
							}
						}

						.list-right {
							margin-left: 16rpx;

							text {
								color: #666666;
								font-size: 24rpx;
							}

							.title {
								text {
									color: #333333;
									font-size: 32rpx;
									overflow: hidden; //超出的文本隐藏
									text-overflow: ellipsis; //溢出用省略号显示
									display: -webkit-box;
									-webkit-line-clamp: 1; // 超出多少行
									-webkit-box-orient: vertical;
								}
							}
						}
					}
				}

				.box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.box-list {
						width: 240rpx;
						height: 240rpx;
						background-color: #f6f6f6;
						margin-bottom: 16rpx;
						text-align: center;

						.img {
							margin: 0 auto;
							margin-top: 38rpx;
							width: 120rpx;
							height: 120rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #fff;
							border-radius: 50%;

							image {
								width: 64rpx;
								height: 64rpx;
							}
						}

						text {
							color: #666666;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
